<template>
	<div>
		<div class="template" v-show="Loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="aui-header">
			<a class="aui-pull-left aui-btn" @click="retreat">
				<img src="../assets/rightbut.png">
			</a>
			<div class="aui-title">整点特卖</div>
			<div class="rightbut" @click="more"></div>
		</header>
		<div class="navigation_d" v-show="isShow">
			<div @click="home">首页</div>
			<div @click="my">我的</div>
			<div @click="seek">搜索</div>
			<div @click="news">消息</div>
		</div>
		<!--抢购时间-->
		<div class="menulist">
			<ul class="menulist-ul">
				<li v-for="(item,index) in data" @click="prolistbut(item.id,index)" :class="id == item.id ?'on' :'samemenu-li'">
					<h1>{{item.activetime}}</h1>
					<p v-if="item.isSpecial	== 0">已开抢</p>
					<p v-else-if="item.isSpecial == 1" v-model="specid">特卖中</p>
					<p v-else-if="item.isSpecial == 2">未开始</p>
				</li>
			</ul>
		</div>

		<div class="seckillbanner" v-show="seckAdvert">
			<a><img :src="advJson[0].img" class="sekillimg"></a>
		</div>
		<div class="seckillbanner" v-show="seckAdverts" v-for="item in advJson">
			<div class="samebanner"><img :src="item.img"></div>
		</div>
		<div class="prometcon">
			<h4>抢购中 先下单先得哦</h4>
		</div>
		<!--
        	作者：offline
        	时间：2018-01-19
        	描述：商品数据
      -->
		<div class="goodscon" v-for="item in proJson" @click="jd(item.id,item.couponMoney)">
			<ul class="goodsecklist" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
				<li class="goodseckill-li">
					<div class="goodseckimg">
						<img :src="item.mainImageUrl">
						<i class="jdSymbol" v-if="item.spuPlatform == 'jd'"></i>
					</div>

					<div class="goodseckword">
						<div class="goodname">
							<img src="../assets/jingxaun.png"> {{item.goodsName}}
						</div>
						<div class="dropD">
							<span class="costprice">￥{{item.price}}</span>
							<span class="drop">/</span>
							<span class="drop">降{{item.couponMoney}}元</span>
						</div>
						<div class="conPrice">￥{{item.conPrice}}</div>
						<div class="sellD">
							<div class="stocknum">销售{{item.totalSales}}</div>
							<div class="rushbut">立即抢购</div>
						</div>
						<!--<div class="vouchercon">
							<div class="redvoucher">{{item.orginPrice}}元</div>
							<div class="collectimg"></div>
							<span class="pocketmoney">赚{{item.marketProfitPercent}}元</span>
						</div>
						<div class="purchasecon">
							<span class="seckillprice"><i class="priceSymbol">￥</i>32</span>
							<div class="rushbut">立即抢购</div>
						</div>
						<div class="stockcon">
							<span class="costprice">￥{{item.price}}</span>
							<div class="stockinfo">
								<span class="stocknum">库存剩余{{item.totalSales}}</span>
								<div class="progessbar">
									<div class="changeprogess"></div>
								</div>
							</div>
						</div>-->
					</div>
				</li>

			</ul>
		</div>
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { InfiniteScroll } from 'mint-ui';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				data: [],
				advJson: [],
				seckAdvert: true,
				seckAdverts: false,
				specid: '',
				proJson: [],
				index: 0,
				loading: false,
				id: '',
				typename:'',
				isShow:false,
				Loading:true
			}
		},
		created() {
			this.typename = this.$route.query.typename;
			var url = BaseUrl + "special/getspecialtime?spuPlatform=" + this.typename;
			this.$http.get(url).then(res => {
				if(res.data.code == '10000') {
					this.Loading=false;
					var json = res.data.data;
//					console.log(json)
					for(var i = 0; i < json.length; i++) {
						var time = json[i].specialTime.split(' ');
						var intertime = time[1].split(':');
						json[i].activetime = intertime[0] + ':' + intertime[1];
						if(json[i].isSpecial == "1") {
							this.specid = json[i].id;
							this.id = json[i].id;
						}
					}
					this.data = res.data.data;
//					商品列表数据追加
					var listUrl = BaseUrl + 'special/speciallist?specialId=' + this.specid + '&type=' + this.typename;
					this.$http.get(listUrl).then(res => {
						if(res.data.code == "10000") {
							this.proJson = res.data.data.list;
						}
					})
				}else{
					this.Loading=false;
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					})
				}
			}).catch(error=>{
				this.Loading=false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
			//广告位
			var advertUrl = BaseUrl + 'special/advertlist';
			this.$http.get(advertUrl).then(res => {
				if(res.data.code == "10000") {
					this.Loading=false;
					this.advJson = res.data.data.list
					var len = res.data.data.list.length;
					if(len == 1) {
						//this,
						this.seckAdvert = true;
						this.seckAdverts = false;
					} else {
						this.seckAdvert = false;
						this.seckAdverts = true;
					}
				}else{
					this.Loading=false;
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					})
				}
			}).catch(error=>{
				this.Loading=false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})

		},

		methods: {
			//导航退后
			retreat: function() {
				window.history.go(-1);
			},
			//更多
			more:function(){
				this.isShow = !this.isShow;
			},
			//首页
			home:function(){
				this.$router.push({ path: '/' }) 
			},
			//我的
			my:function(){
				this.$router.push({ path: '/personalContent' })
			},
			//搜索
			seek:function(){
				this.$router.push({ path: '/seekgoods' })
			},
			//消息
			news:function(){
				this.$router.push({ path: '/news' })
			},
			prolistbut: function(obj, index) {
				this.Loading=true;
				this.id = obj;
				//商品列表数据追加
				var listUrl = BaseUrl + 'special/speciallist?specialId=' + obj + '&type=' + this.typename;
				this.$http.get(listUrl + "&length=10&start=" + this.index).then(res => {
					if(res.data.code == "10000") {
						this.Loading=false;
						this.proJson = res.data.data.list;
						if(res.data.data.isMore == "none") {
							this.loading = true;
							return;
						} else if(res.data.data.isMore == "have") {
							this.loading = false;
							this.index++;
						}
					}else{
						this.Loading=false;
						Toast({
							message: res.data.msg,
							position: 'middle',
							duration: 3000
						})
					}
				}).catch(error=>{
					this.Loading=false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			loadMore() {
				this.loading = true;
				setTimeout(() => {
					this.prolistbut(obj, this.index);
					this.loading = false;
				}, 1000);
			},
			//jd跳转
			jd:function(id, couponMoney){
				this.commodity(id, couponMoney);  //全局事件
			}
		}
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		/*background: rgba(0,0,0,0.5);*/
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.tabli {
		color: #ff2040;
	}
	.aui-title{
		color: #ff2040;
	}
	.rightbut {
		width: 0.43rem;
		height: 0.61rem;
		background: url(../assets/navgation.png);
		background-size: 100%;
		float: right;
		margin: 0.17rem;
	}
	.navigation_d{
		width: 1.8rem;
		position:fixed;
		z-index: 9;
		top: 1rem;
		right: 0;
	}
	.navigation_d div{
		width: 100%;
		height: 0.8rem;
		text-align: center;
		line-height: 0.8rem;
		background: rgba(0,0,0,0.5);
		margin-bottom: 0.05rem;
		color: #FFFFFF;
	}
	/******时间标题*******/
	
	.menulist {
		width: 100%;
		height: 0.99rem;
		background: #FFFFFF;
		margin-top: 1rem;
		overflow-x: scroll;
		overflow-y: hidden;
	}
	
	.menulist-ul {
		width: 900px;
		height: 100%;
		font-size: 0;
		display: flex;
	}
	
	.samemenu-li {
		display: inline-block;
		height: 100%;
		text-align: center;
		color: #323232;
		width: 1.5rem;
	}
	
	.on {
		display: inline-block;
		height: 100%;
		text-align: center;
		width: 1.5rem;
		color: #ff2040;
		border-bottom: 1px solid #ff2040;
	}
	
	.on>h1 {
		font-size: 0.33rem;
	}
	
	.on>p {
		font-size: 0.22rem;
	}
	
	.samemenu-li>h1 {
		font-size: 0.33rem;
	}
	
	.samemenu-li>p {
		font-size: 0.22rem;
	}
	
	.pitchsty {
		color: #ff2040 !important;
		border-bottom: solid 0.03rem #FF2040;
	}
	
	::-webkit-scrollbar {
		/*隐藏滚轮*/
		display: none;
	}
	/******广告位******/
	
	.seckillbanner {
		width: 100%;
		height: 2.34rem;
		border-bottom: solid 0.01rem #CCCCCC;
		border-top: solid 0.01rem #CCCCCC;
		display: flex;
		font-size: 0;
	}
	
	.sekillimg {
		width: 100%;
		height: 100%;
	}
	
	.samebanner {
		width: 49.5%;
		height: 100%;
		display: inline-block;
		margin-left: 0.06rem;
	}
	
	.samebanner:nth-child(2) {
		margin-left: 0;
	}
	
	.samebanner>img {
		width: 100%;
		height: 100%;
	}
	/******提示*******/
	
	.prometcon {
		width: 100%;
		border-bottom: solid 0.01rem #CCCCCC;
		background: #FFFFFF;
		padding: 0.19rem 0.25rem;
	}
	
	.prometcon>h4 {
		font-size: 0.24rem;
		color: #323232;
		font-weight: normal;
	}
	/***商品数据****/
	
	.goodscon {
		width: 100%;
		margin-top: 0.1rem;
	}
	
	.goodsecklist {
		font-size: 0;
	}
	
	.goodseckill-li {
		width: 100%;
		display: flex;
		display: -webkit-flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #fff;
		/*padding: 0 0.5rem;
		margin-top: 0.5rem;*/
		padding: 0 0.2rem;
		margin-top: 0.1rem;
	}
	
	.goodseckimg {
		width: 2.8rem;
		height: 2.8rem;
	}
	
	.goodseckimg>img {
		width: 100%;
		height: 100%;
	}
	
	.goodseckword {
		width: 57%;
	}
	
	.goodname {
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #323232;
		font-size: 0.26rem;
		line-height: 0.4rem;
		margin-top: 0.15rem;
	}
	
	.goodname img {
		width: 0.7rem;
		height: 0.33rem;
	}
	/***红包券****/
	
	.vouchercon {
		font-size: 0;
		margin-top: 0.2rem;
		display: -webkit-box;
	}
	
	.redvoucher {
		width: 1.08rem;
		height: 0.28rem;
		background: url(../assets/coupn.png);
		background-size: 100%;
		line-height: 0.28rem;
		text-align: center;
		color: #FFFFFF;
		font-size: 0.2rem;
	}
	
	.collectimg {
		width: 0.37rem;
		height: 0.35rem;
		background: url(../assets/collect.png);
		background-size: 100%;
		margin-left: 0.7rem;
	}
	
	.dropD {
		margin-bottom: 0.2rem;
	}
	
	.drop {
		color: #FF2040;
		font-size: 0.28rem;
		margin-left: 0.2rem;
	}
	
	.conPrice {
		color: #FF2040;
		font-size: 0.3rem;
		font-weight: bold;
		text-align: right;
		margin-bottom: 0.2rem;
	}
	
	.sellD {
		display: flex;
		justify-content: space-between;
	}
	
	.purchasecon {
		margin-top: 0.3rem;
	}
	
	.seckillprice {
		color: #FF2040;
		font-size: 0.36rem;
		display: -webkit-inline-box;
		line-height: 0.35rem;
	}
	
	.priceSymbol {
		font-size: 0.28rem;
		color: #FF2040;
		font-style: normal;
		display: block;
	}
	
	.rushbut {
		width: 1.4rem;
		height: 0.4rem;
		background-color: #FF2040;
		border-radius: 0.2rem;
		text-align: center;
		color: #FFFFFF;
		line-height: 0.4rem;
		float: right;
		font-size: 0.24rem;
	}
	
	.stockcon {
		margin-top: 0.1rem;
	}
	
	.costprice {
		font-size: 0.26rem;
		color: #989898;
		text-decoration: line-through;
	}
	
	.stockinfo {
		float: right;
		display: flex;
	}
	
	.stocknum {
		color: #989898;
		font-size: 0.22rem;
	}
	
	.progessbar {
		width: 1.4rem;
		height: 0.11rem;
		border: solid 0.01rem #FF2040;
		border-radius: 0.3rem;
		margin-top: 0.12rem;
		margin-left: 0.1rem;
	}
	
	.changeprogess {
		width: 76%;
		height: 0.1rem;
		background-color: #FF2040;
	}
	
	.jdSymbol {
		width: 0.67rem;
		height: 0.67rem;
		background: url(../assets/jd.png);
		background-size: 100% 100%;
		display: block;
		position: relative;
		right: -2.12rem;
		margin-top: -0.68rem;
	}
</style>